<template>
<h1>个人简历练习</h1>
  <table border="1px">
    <tr>
      <td >照片</td>
      <td><img :src="person.imgUrl" width="150"></td>
    </tr>
    <tr>
      <td>姓名</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="(item,index) in person.friends">{{item}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="loadData">点我生成数据</button>
</template>

<script setup>

import {ref} from "vue";
//1.定义一个空对象用于绑定
const person=ref({
  name:'',age:'',imgUrl:'',friends:[]
});
//2.定义加载数据的方法
const loadData=()=>{
  person.value={
    name:'范传奇',
    age:18,
    imgUrl: 'imgs/fcq.jpg',
    friends: ['吉伊','乌萨奇','小八']
  }
}
</script>

<style scoped>

</style>